<template>
    <div id="ranking">
      <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper" style="touch-action: pan-y!important;">
      <img class="hot-img" src="../../../assets/imgs/homePage/放大镜.png" alt="">
      <div id="left-nav">
        <div v-for="(item,index) in navTxt" @click="navClick(index)" :class="{active:navActive==index}" :key="index">{{item}}</div>
      </div>
      <!--未请求到数据时不渲染-->
      <div class="comic-bar" v-if="returnComic2">
        <!--循环创建排行分类标题,并根据navAcitve和index实现选项卡的效果-->
        <div v-for="(item,index) in comic2" :key="index" v-show="navActive==index">
          <!--在每个选项卡中循环创建div放置对应的分类内容-->
          <div class="comic" v-for="(i,a) in item.content" :key="a" @click="detail(i)">
            <div class="index">
              {{a+1}}
            </div>
            <img :src="i.imgUrl" alt="">
            <!--漫画信息-->
            <div class="comic-txt">
              <h3>{{i.name}}</h3>
              <div>
                <p class="author">{{i.author}}</p>
                <span class="series" v-for="(a,b) in i.series">{{a}}</span>
                <p class="updata">更新至{{i.beUpdateTo}}话</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      </v-touch>
    </div>
</template>

<script>
    export default {
        name: "Ranking",
      data(){
          return{
            navTxt:['日漫榜','国漫榜','应援榜','月票榜','飙升榜','免费榜'],
            navActive:0,
            comic2:[
              {
                id:1,
                content:[]
              },
              {
                id:2,
                content:[]
              },
              {
                id:3,
                content:[]
              },
              {
                id:4,
                content:[]
              },
              {},
              {}],
            comicActive:false
          }
      },
      methods:{
        detail(obj){
          // console.log(obj);
          this.$router.push({name:'Detail',query:obj})
        },
        navClick(index){  //实现点击切换选项卡
          this.navActive = index
          // console.log(this.navActive);
        },
        //比较器
        compare(propertyName){
         return (object1, object2)=>{
           var value1 = object1[propertyName];
           var value2 = object2[propertyName];
           if (value2 < value1) {
             return -1;
           } else if (value2 > value1) {
             return 1;
           } else {
             return 0;
           }
         }
        },
        swiperleft: function () {
          this.$router.push({'path': '/homePage/positiveEnergy'});
        },
        swiperright: function () {
          this.$router.push({'path': '/homePage/hot'});
        }
      },
      computed:{
        returnComic2(){
            if(this.$store.state.states){  //请求成功时
              if(this.comicActive){  //避免二次渲染
                return true
              }
              this.comicActive = true
              let arr = this.$store.state.comic
              //对漫画进行分类
              for (var i = 0; i < arr.length; i++) {
                if(arr[i].type.indexOf('日漫')!=-1){
                  this.comic2[0].content.push(arr[i])
                }
                if(arr[i].type.indexOf('国漫')!=-1){
                  this.comic2[1].content.push(arr[i])
                }
              }
              arr.sort(this.compare('popularity'))
              this.comic2[2].content=arr
              arr.sort(this.compare('monthlyPass'))
              this.comic2[3].content=arr
              return true
            }else{
              return false
            }
          }
      }
    }
</script>

<style lang="less">
@import "../../../assets/css/homePage/ranking";
</style>
